<style lang="scss" scoped>
#rare-left {
    .collapse{
        display:block;
        ul li span{
            display: none;
        }
        ul li .iconstyle{
            left:28px;
        }
    }
    .nav-left {
        position: relative;
        background: #3C3F60;
        padding-bottom: 9999px;
        margin-bottom: -9999px;
        .headPhoto {
            background: #3C3F60;
            text-align: center;
            padding-top: 17px;
            .username {
                padding-bottom: 10px;
                color: #6C7695;
                font-size: 16px;
            }
        }
        .el-menu {
            border-right: 1px solid #3C3F60;
            .el-menu-item {
                &.is-active {
                    background: #2B3245 !important;
                }
            }
        }
        a {
            display: block;
            text-align: center;
            font-size: 16px;
            color: #EBEEF5;
        }
        a:hover {
            background: #2B3245;
        }
        a.active {
            background: #2B3245;
        }
        .iconstyle {
            position: absolute;
            left: 35px;
            line-height: 2em;
            width: 20px;
            height: 20px;
            margin-top: 7px;
            top: 10px;
            background: url('../../static/icon/menu.png');
        }
        .mydata {
            background-position: -1px -1px;
        }
        .myreport {
            background-position: 0px -26px;
        }
        .myCustom{
            position: absolute;
            left: 35px;
            line-height: 2em;
            width: 22px;
            height: 22px;
            color: rgb(235, 238, 245);
            // margin-top: 7px;
            top: 10px;
            &::before{
                width: 22px;
                height: 22px;
            }
        }
        .set {
            background-position: -1px -52px;
        } 
    }
}


</style>
<template>
    <div id="rare-left" >
        <div :class="menu">
            <div class="headPhoto">
                <img src="/static/images/home/headpic.jpg" />
                <div class="username">{{currentUser}}</div>
            </div>
            <el-menu background-color="#3C3F60" text-color="#EBEEF5" router :default-active="$route.path"
             active-text-color="#EBEEF5" :collapse = "collapsed">
                <el-menu-item :index="datapath">
                    <i class="iconstyle mydata"></i>
                    <span slot="title" style="margin-left:50px">我的数据</span>
                </el-menu-item>
                <el-menu-item index="/myReport">
                    <i class="iconstyle myreport"></i>
                    <span slot="title" style="margin-left:50px">我的报告</span>
                </el-menu-item>
                <el-menu-item index="/mycustom">
                    <i class="el-icon-edit myCustom is-active large" style="width:20px;heigth:20px"></i>
                    <span slot="title" style="margin-left:50px">自定义流程参数</span>
                </el-menu-item>
                <el-menu-item index="/mytask">
                    <i class="el-icon-news myCustom is-active large" style="width:20px;heigth:20px"></i>
                    <span slot="title" style="margin-left:50px">任务管理</span>
                </el-menu-item>
                <el-menu-item index="/ugcfileupload">
                    <i class="el-icon-upload2 myCustom is-active large" style="width:20px;heigth:20px"></i>
                    <span slot="title" style="margin-left:50px">UGC</span>
                </el-menu-item>
            </el-menu>
           
            <!-- <ul>               
                <li><a href="javascript:;" @click="goHome($event)" class='active'><span class="iconstyle mydata"></span>我的数据</a></li>
                <li><a href="javascript:;" @click="checkMyReport($event)"><span class="iconstyle myreport"></span>我的报告</a></li>   
                <li style="display:none;"><a href="javascript:;"><span class="iconstyle set"></span>设置</a></li>
            </ul> -->
        </div>
    </div>
</template>

<script>
export default {
    name: "rare-left",
    props:["collapse"],
    data() {
        return {
            collapsed: false,
            currentUser: '',
            datapath: ''
        }
    },
    computed:{
        menu(){
            return this.collapse?'nav-left collapse':'nav-left'
        }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
        checkMyReport(event) {
            $(".active").removeClass("active");
            $(event.target).addClass("active");
            this.$router.push("/myReport");
        },
        goHome(data) {
            $(".active").removeClass("active");
            $(data.target).addClass("active");
            if (this.$store.state.productId == 1) {
                this.$router.push("/rare");
            } else if (this.$store.state.productId == 2) {
                this.$router.push("/tumor");
            }
        }
    },
    created() {
        this.currentUser = this.$store.state.username;
        if (this.$store.state.productId == 1) {
            this.datapath = '/rare'
        } else if (this.$store.state.productId == 2) {
            this.datapath = '/tumor'
        }
    }
}
</script>



